<template>
  <el-dialog
    :visible.sync="visible"
    custom-class="history-dialog"
    title="获取记录"
    :show="show"
    width="350px"
    top="30vh"
    :show-close="true"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    @close="OnClose">
    <div class="content">
      <div class="content-col" v-for="(t, i) in tabDataList">
        <li class="content-text">{{t.getDate}}</li>
      </div>
      <div class="content-end">
        <span v-if="!noData" @click="getMore">显示更多...</span>
        <span v-else>无更多数据</span>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'historyDialog',
    props: [
      'show',
      'tabDataList',
      'moreDate',
      'noData',
    ],
    data() {
      return {
        visible: this.show,
      }
    },
    watch: {
      show: {
        handler(show) {
          this.visible = this.show
        }
      }
    },
    methods: {
      OnClose() {
        this.$emit('update:show', false)
      },
      /**
       * 展示dialog
       */
      showO(){
        this.visible = true
      },
      getMore(){ //加载更多
        this.moreDate()
      }
    }
  }
</script>

<style lang="scss" scoped>
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar{
    width: 7px;
    height: 7px;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb{
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: #c8c8c8;
  }
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  /deep/ .el-dialog{
    box-shadow: 0px 10px 17px 3px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    .el-dialog__header{
      .el-dialog__title{
        font-size: 16px;
        font-weight: bold;
        color: #111111;
        line-height: 18px;
      }
    }
    .el-dialog__body{
      padding: 5px 20px;
    }
  }
  .history-dialog{
    .content{
      overflow-y: auto;
      max-height: 320px;
      .content-col{
        width: 100%;
        .content-text{
          padding: 10px 0;
          color: #333333;
          font-size:14px;
          font-weight: 500;
          border-bottom: 1px solid #EEEEEE;
        }
      }
      .content-end{
        text-align: center;
        line-height: 25px;
        span{
          cursor: pointer;
          font-size: 12px;
          font-weight: 400;
          color: #3B83FC;      }
      }
    }
  }

</style>
